<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 一   :model绑定一个对象 里面是表单元素的prop的值 ;rules绑定验证对象 各表单元素验证规则  ref获取dom用于全局和局部验证 -->
    <el-form label-width="80px" :model='from' :rules='rules' ref='from'>
      <!--二    label绑定元素,并显示名称  :rules绑定rules对象中自己的值与prop绑定form中自己的值都是对应的() -->
      <el-form-item label="手机号" prop='tel'>
        <!-- 三 v-model双向绑定form中自己的值 -->
        <el-input placeholder="请输入手机号" v-model='from.tel'></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop='code'>
        <el-input placeholder="请输入验证码" v-model='from.code'></el-input>
        <el-button @click='vlee'>获取验证码</el-button>
      </el-form-item>
      <el-form-item prop='check'>
        <el-checkbox v-model='from.check' label='1'>选项1</el-checkbox>
      </el-form-item>
      <el-form-item label-width="0">
        <div style="text-align: center;">
          <el-button @click='vle'>登录</el-button>
          <el-button>取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <!-- 引入组件库 -->
  <script src="./index.js"></script>
  <script>
    const vue = new Vue({
      el: '#app', //用于挂载要管理的元素
      data() {
        return {
          from: {
            tel: '',
            code: '',
            check: []
          },
          rules: {
            tel: [
              { required: true, message: '必填', trigger: 'blur' },
              { min: 11, max: 11, message: '11位电话号码', trigger: 'blur' },
              //自定义表单验证
              {
                validator: (rule, value, callback) => {
                  // rule 规则  value 当前验证的值 callback 返回函数 通不通过都需要有
                  const testTel = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                  if (testTel.test(value)) {
                    callback()
                  } else {
                    callback(new Error('请输入正确的电话号码'))
                  }
                }
              }
            ],
            code: [
              { required: true, message: '必填', trigger: 'blur' },
              { min: 6, max: 6, message: '验证码错误', trugger: 'blur' }
            ],
            check: [
              { required: true, message: '勾选用户协议', trigger: 'change' }
            ]
          }
        }
      },
      methods: {
        // 全局验证的核心代码就是this.$refs.from.validate方法
        vle() {
          this.$refs.from.validate(res => {
            if (res) {
              this.$message.success('验证成功')
            } else {
              this.$message.error('验证失败')
            }
          })
        },
        vlee() {
          // 局部验证的核心代码就是validateField方法(需要验证的局部字段,(错误信息形参errormessage)=>{errormessage为空则通过反之不通过} )
          this.$refs.from.validateField(['tel'], (err) => {
            console.log('err:' + err);
          })
        }
      },
    })
  </script>
</body>

</html>